<template>
  <el-dropdown @command="handleThemeChange" trigger="click">
    <el-button :icon="themeIcon" circle size="small" />
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="light" :class="{ active: themeStore.themeMode === 'light' }">
          <el-icon><Sunny /></el-icon>
          浅色模式
        </el-dropdown-item>
        <el-dropdown-item command="dark" :class="{ active: themeStore.themeMode === 'dark' }">
          <el-icon><Moon /></el-icon>
          深色模式
        </el-dropdown-item>
        <el-dropdown-item command="auto" :class="{ active: themeStore.themeMode === 'auto' }">
          <el-icon><Monitor /></el-icon>
          跟随系统
        </el-dropdown-item>
        <el-dropdown-item divided>
          <el-color-picker
            v-model="themeStore.primaryColor"
            size="small"
            show-alpha
            :predefine="predefineColors"
            @change="handleColorChange"
          />
          主题颜色
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Sunny, Moon, Monitor } from '@element-plus/icons-vue'
import { useThemeStore } from '@/stores/theme'

const themeStore = useThemeStore()

// 主题图标
const themeIcon = computed(() => {
  if (themeStore.themeMode === 'light') return Sunny
  if (themeStore.themeMode === 'dark') return Moon
  return Monitor
})

// 预定义颜色
const predefineColors = [
  '#409EFF', // Element Plus 默认蓝色
  '#67C23A', // 绿色
  '#E6A23C', // 橙色
  '#F56C6C', // 红色
  '#909399', // 灰色
  '#9966FF', // 紫色
  '#FF69B4', // 粉色
  '#000000', // 黑色
  '#FFFFFF', // 白色
]

// 处理主题切换
const handleThemeChange = (command: string) => {
  themeStore.setThemeMode(command as 'light' | 'dark' | 'auto')
}

// 处理颜色变化
const handleColorChange = (color: string) => {
  themeStore.setPrimaryColor(color)
}
</script>

<style scoped>
.el-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}

.el-dropdown-item.active {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.el-dropdown-item:hover {
  background-color: var(--el-color-primary-light-9);
}

.el-color-picker {
  margin-right: 8px;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .el-dropdown-item.active {
    background-color: var(--el-color-primary-light-3);
  }
}
</style>
